<template>
  <div class="micro-map">
    <div id="map" class="micro-map"></div>
    <el-button
      style="z-index:500;position:fixed;top:200px;left:300px"
      @click="addHLBoundary"
      type="primary"
    >绘制图层边界</el-button>
     <el-button
      style="z-index:500;position:fixed;top:200px;left:499px"
      @click="addRegionLable"
      type="primary"
    >添加标签</el-button>
    <el-button
      style="z-index:500;position:fixed;top:200px;left:599px"
      @click="drawSpatialQuery_CIRCLEMARKER"
      type="primary"
    >点绘制查询</el-button>
        <el-button
      style="z-index:500;position:fixed;top:200px;left:699px"
      @click="drawSpatialQuery_POLINE"
      type="primary"
    >线绘制查询</el-button>
    <el-button
      style="z-index:500;position:fixed;top:200px;left:799px"
      @click="drawSpatialQuery_POLYGON"
      type="primary"
    >多边形绘制查询</el-button>
        <el-button
      style="z-index:500;position:fixed;top:200px;left:899px"
      @click="drawSpatialQuery_RECTANGLE"
      type="primary"
    >矩形绘制查询</el-button>
    <el-button
      style="z-index:500;position:fixed;top:200px;left:999px"
      @click="drawSpatialQuery_CIRCLE"
      type="primary"
    >圆绘制查询</el-button>

    <el-button
      style="z-index:500;position:fixed;top:200px;left:1120px"
      @click="drawVicinityQuery"
      type="primary"
    >邻域查询</el-button>

     <el-button
      style="z-index:500;position:fixed;top:200px;left:1320px"
      @click="drawBufferQuery"
      type="primary"
    >缓冲分析</el-button>
    <map-control :overLayerData="overLayerData"></map-control>
  </div>
</template>

<script>
  // eslint-disable-next-line no-unused-vars
import sgisMapBase from "@/utils/map/sfgis.map.base.js";
import sgisLayerBase from "@/utils/map/sfgis.layer.base.js";
import sgisRegionBase from "@/utils/map/sfgis.region.base.js";
import mapTool from "@/utils/map/sfgis.map.tool.js";
import Layer from "@/utils/map/lib/main.js";
import MapControl from "@/components/MapControl/index";
import data from "./data/data.js";
import overLayersData from "./overlayer.js";
import { debug } from 'util';
export default {
  name: "Layer",
  data() {
    return {
      color1: "#409EFF",
      layers: [],
      selectlayer: "",
      map: "",
      overLayerData: overLayersData.data
    };
  },
  components: { MapControl },
  mounted() {
    this.loadMap(); // 添加地图底图
  },
  methods: {
    loadMap() {
      sgisMapBase.init("map");
      sgisLayerBase.init(data.map);
      // //初始化一下区划配置信息
      sgisRegionBase.regionCatalog.setRegionCatalogs(data.regioncatalogs.data);
    },
    /* *绘制图层边界 并定位到对应位置 */
    addHLBoundary() {
      // sgisLayerBase.switchBaseLayer(1);
      Layer.hlLayer.addHLBoundary(
        data.regioninfos.data,    //区划参数
        "1",                    //区划类型
        sgisMapBase.getMap()    //地区对象
      );
    },
    /**添加区划标签 */
    addRegionLable(){
      Layer.regionLableLayer.createLayer(
        data.lableRegionData.data,   //区划参数
        sgisMapBase.getMap()     //地图对象
        );
    },
    /**
     * 空间绘制查询-点
     */
    drawSpatialQuery_CIRCLEMARKER(){
      mapTool.drawSpatialQuery("CIRCLEMARKER","3","1");
    },
        /**
     * 空间绘制查询-线
     */
    drawSpatialQuery_POLINE(){
      mapTool.drawSpatialQuery("POLINE","3","1");
    },
        /**
     * 空间绘制查询-多边形
     */
    drawSpatialQuery_POLYGON(){
      mapTool.drawSpatialQuery("POLYGON","3","1");
    },
        /**
     * 空间绘制查询-矩形
     */
        drawSpatialQuery_RECTANGLE(){
      mapTool.drawSpatialQuery("RECTANGLE","3","1");
    },
        /**
     * 空间绘制查询-圆
     */
    drawSpatialQuery_CIRCLE(){
      mapTool.drawSpatialQuery("CIRCLE","3","1");
    },
    /**
     * 邻域分析
     */
    drawVicinityQuery(){
      mapTool.drawVicinityQuery("3","1");
    },
    /**
     * 缓存分析
     */
    drawBufferQuery(){
      //换从分析分为两种类型，绘制=DRAW和选择地物=SELECT
      //1  绘制类型的
      mapTool.drawBufferQuery("3","1","DRAW","0.1");
      // //2 选择地物的
      // mapTool.setBufferDataSetName("ST_R_HELIU");  //以河流为地物
      // mapTool.drawBufferQuery("3","1","SELECT","0.001");

    },
    /* *获取所有图层 */
    initLayers() {
      this.layers = sgisLayerBase.getOverLayers();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.micro-map {
  width: 100%;
  height: 100%;
  background:-webkit-gradient(linear, 0% 0%, 0% 20%,from(#ace0f9), to(#fff1eb));/*谷歌*/
}
</style>
